<template>
	<view class="box" :style="{ backgroundImage: `url(${bgi})`, backgroundSize: `${kuan}rpx` }">
		<slot class="title" name="title">默认标题</slot>
		<slot class="desc" name="desc1">描述1</slot>
		<slot class="desc" name="desc2">描述2</slot>
	</view>
</template>

<script setup>
const props = defineProps({
	bgi: {
		type: String,
		required: true
	},
	kuan: {
		type: Number,
		required: true,
		 default: 100
	}
})
</script>

<style lang="scss" scoped>
  .box{
	border-radius: 20rpx;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 30rpx 20rpx;
	background-size: 110rpx 110rpx;
    background-position: right bottom;
	background-repeat: no-repeat;
  }
  :deep(.title) { /* 穿透到父组件内容 */
	font-size: 32rpx;
	font-weight: 700;
	color: #2b313d;
  }
  :deep(.desc) {
	color: #939CA1;
	font-size: 24rpx;
  }
</style>